<template>
  <div class="content-wrapper">
    <el-row type="flex" :gutter="20" style="padding-left: 1vw">
      <el-col :span="4">
        <h2 class="subtitle" style="color:black; margin-top: 3vh; margin-left: 1vw">场站管理</h2>
      </el-col>
      <el-col :span="19">
        <el-form :inline="true" class="demo-form-inline" style="margin: 2vh 0 0 2vw;">
          <el-button class="el-blue-button" style="float: right;margin-right: 20px" @click="addFactory('新增通知')"><i class="el-icon-plus"></i>&nbsp;新增</el-button>
        </el-form>
      </el-col>
    </el-row>
    <el-row  style="margin: 0 5vw">
      <section>
        <el-table
          :data="factory"
          style="width: 100%" v-loading="loading">
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="name" label="场站名称" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="230" align="center">
            <template slot-scope="scope">
              <el-button class="el-blue-button" size="mini" @click="goViewWithQuery('编辑', scope.row)">修改</el-button>
              <el-button class="el-green-button" size="mini" @click="goViewConfig(scope.row)">配置</el-button>
              <!--            <el-button class="el-red-button" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <div class="page-row">
          <el-pagination
            :page-size="8"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next, jumper"
            :current-page.sync="currentPage"
            :total=total /></div>
      </section>
    </el-row>
    <currency-dialog :visible-flag='addDialogForm' :factory_form="add_factory_form" @close-dialog="closeCurrencyDialog" :dialogKind="dialogKind" :factoryId="factoryId"></currency-dialog>
    <ThConfig :visible-flag='ThConfigDialogForm' :factory_form="add_factory_form" @close-dialog="closeCurrencyDialog"></ThConfig>
  </div>
</template>

<script>
import request from '@/network/request'
// import userDialog from './userDialog'
import currencyDialog from './currencyDialog'
import ThConfig from './ThConfig'
export default {
  name: 'index',
  components: {
    ThConfig,
    currencyDialog
  },
  data () {
    const factoryForm = {
      id: '',
      name: '',
      identification: '',
      post: [],
      eleMeter1: 1,
      eleMeter2: 1,
      lightMeter: 1
    }

    return {
      // userForm,
      dialogKind: 0, // 0:修改信息dialog；1：增加信息dialog
      factoryName: '',
      userDialogForm: false,
      addDialogForm: false,
      ThConfigDialogForm: false,
      users: [],
      factory: [],
      factory_form: this.easyClone(factoryForm),
      add_factory_form: this.easyClone(factoryForm),
      loading: true,
      total: 35,
      currentPage: 1,
      pageSize: 8,
      factoryId: ''
    }
  },
  beforeMount () {
    this.reset()
  },
  methods: {
    getPost (identification) {
      request({
        method: 'get',
        url: '/url/getPost',
        params: {
          identification: identification
        }
      }).then((res) => {
        this.add_factory_form.post = res.data.data
        console.log('getPost测试', res.data.data)
        console.log('getPost传入参数identification', this.add_factory_form.identification)
      })
    },
    goViewWithQuery (name, data) {
      // this.getPost(this.add_factory_form.identification)
      switch (name) {
        case '查看': {
          this.userDialogForm = true
          this.factory_form = data
          break
        }
        case '编辑': {
          this.dialogKind = 0
          this.addDialogForm = true
          this.add_factory_form = data
          this.factoryId = (data.id).toString()
          console.log(this.factoryId)
          break
        }
      }
    },
    goViewConfig (data) {
      this.ThConfigDialogForm = true
      this.factory_form = data
      this.add_factory_form = data
    },
    handleDelete (index, row) {
      this.$confirm('此操作将删除该场站的一切信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          method: 'post',
          url: '/url/delete',
          params: {
            id: row.id
          }
        }).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.requestFactoryList()
          } else {
            this.$message.error('删除失败!')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getFactory () {
      this.requestFactoryList()
    },
    addFactory () {
      this.dialogKind = 1
      this.addform = this.easyClone(this.factory_form)
      this.addDialogForm = true
    },
    reset () {
      this.factoryName = ''
      this.currentPage = 1
      this.requestFactoryList()
    },
    requestFactoryList () {
      this.loading = true
      request({
        method: 'get',
        url: '/url/get',
        params: {
          pageSize: this.pageSize,
          currentPage: this.currentPage
        }
      }).then((res) => {
        this.factory = res.data.data
        for (let i = 0; i < this.factory.length; i++) {
          if (this.factory[i].id === 9999) {
            this.factory.splice(i, 1)
          }
        }
        this.total = res.data.data.sum
        this.factory = res.data.data.user
        this.loading = false
      })
    },
    /**
     * 通过JSON转换的方式进行简单的深克隆
     * 不支持属性中含有函数、正则，只支持标准JSON格式的对象
     * @param obj Object
     * @return Object
     */
    easyClone (obj) {
      return JSON.parse(JSON.stringify(obj))
    },
    closeUserDialog () {
      this.userDialogForm = false
    },
    closeCurrencyDialog () {
      this.addDialogForm = false
      this.ThConfigDialogForm = false
      this.requestFactoryList()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.requestFactoryList()
    }
    // recover () {
    //   this.$confirm('确定恢复到默认配置吗（其中包含：规则、点位、用户的数据）').then(() => {
    //     request({
    //       method: 'get',
    //       url: '/DBOp/backupDB'
    //     }).then((res) => {
    //       this.$alert(res.data.message)
    //     })
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
  .demo-form-inline {
    padding-top: 0.8vh;
  }
  >>>td .cell {
    /*margin-top: 3vh;*/
    margin: 1% 0;
  }
  .table-row {
    height: 100%;
    width: 100%;
    //position: sticky;
  }
  .page-row {
    margin-top: 2vh;
    margin-right: 2vw;
    float: right;
    position: sticky;
  }
  //.pagination {
  //  margin-top: 2vh;
  //  float: right;
  //  padding-top: 2vh;
  //  padding-right: 2vh;
  //  text-align: center;
  //}
  //>>>.el-pagination__total, >>>.el-pagination__jump{
  //  color: white;
  //}
  >>> .el-pagination span {
    font-size: 18px;
  }
  //>>>.number{
  //  color: #dddddd;
  //}
</style>
